<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复利计算器</title>
    <style>
        .h-box{
            width: 40px;
            height: 100px;
            background-color:red;
        }
        #height-after{
            width: 40px;
            height: 100px;
            background-color: green;
        }
        form div{
            margin: 10px;
        }
        table div{
            margin: auto;
        }
        table td {
            vertical-align: bottom;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <!-- 制作一个复利计算器。创建一个页面，允许输入银行存款总额以及存款利率，然后计算出在给定时间段后，钱会变成多少。 -->
    <h2>复利计算器</h2>
    <form name="calculator">
    <div>本金：<input type="text" name="money" ></div>
    <div>年利率：<input type="number" name="interest" id="">%</div>
    <div>年期：<select name="years" id="">
                <option value="0.25">3个月（0.25年）</option>
                <option value="0.5">6个月（0.5年）</option>
                <option value="1">12个月（1年）</option>
                <option value="1.5">18个月（1.5年）</option>
                <option value="2">24个月（2年）</option>
                <option value="3">36个月（3年）</option>
                <option value="5">60个月（5年）</option>
            </select>
    </div>
    </form>
    <table style="margin-top: 20px">
        <tr><th>本金</th><th>复利终值</th></tr>
        <tr>
            <td id="money-before"></td>
            <td id="money-after"></td>
        </tr>
        <tr>
            <td><div class="h-box"></div></td>
            <td><div id="height-after"></div></td>
        </tr>
    </table>
    
    <script>
        let form = document.forms.calculator;
        
        form.money.oninput = calculate;
        form.interest.oninput = calculate;
        form.years.onchange = calculate;

        function calculate(){
            let initial = +form.money.value;
            if (!initial) return;

            let interest = form.interest.value * 0.01;
            if (!interest) return;

            let years = +form.years.value;
            if(!years) return;

            let result = Math.round(initial * (1 + interest * years));

            let height = result/initial * 100 +'px';
            document.getElementById('height-after').style.height = height;
            document.getElementById('money-before').innerHTML = initial;
            document.getElementById('money-after').innerHTML =result
             
        }
        calculate();

        
    </script>
</body>
</html>